<template>
    <div class="large-left2 large-panel">
        <div class="top-title">
            <div class="title-one">
                <img class="title-one-ico" src="@/assets/large/panel-title-ico.png" />
                接诊数量
            </div>
        </div>
        <div class="num-box">
            <div class="num-list" v-for="(item,idx) in numList" :key="'num_'+idx">
                <img class="num-list-bg" src="@/assets/large/left2-numbg.png" v-if="item!==','"/>
                <div class="num-list-word">{{item}}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
@Component({
    name: "home",
    components: {},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    @Watch('pageData')
    pageDataChange(){
         this.numList=this.getNumList(this.pageData.patientCount || 0)
    }
    numList:string[]=[]
    chart: any = null;
    dataCount = 0;
    maxData = 1;
    interval = 1;
    mounted() {
       this.numList=this.getNumList(this.pageData.patientCount || 0)
    }
    getNumList(num){
        const str=Number(num).toLocaleString()
        return str.split("")
    }
    childVisible = false;
    openChild() {
        this.childVisible = true;
    }
    
}
</script>
<style lang="scss">
.large-left2 {
    padding-top: 20px;
    position: relative;
    .top-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #3ad3c1;
        font-weight: bold;
        padding-left: 20px;
        margin-bottom: 20px;
    }
    .title-one-ico{
        width: 30px;
      
    }
    .num-box{
        font-weight: bold;
        font-size: 45px;
        color: #fff;
        padding-left: 30px;
    }
    .num-list{
        display: inline-block;
        position: relative;
        height: 70px;
        min-width: 20px;
        margin-right: 1px;
    }
    .num-list-bg{
        height: 100%;
        display: block;
    }
    .num-list-word{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 2px;
        transform: translateY(-4px);
    }
}
</style>
